<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>free</title>
    <link href="https://cdn.bootcss.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/echarts/4.1.0.rc2/echarts.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

    <style>
        .col-center-block {
            float: none;
            display: block;
            margin-left: auto;
            margin-right: auto;
            width: 840px;
            border: 1px solid #e2e2e2;
            overflow:hidden;
            margin-bottom: 15px;
            padding: 15px;
            text-align:center;
            font-size: 13px;
            font-style: normal;
        }
        .item{
            width: 400px;
            height: 28px;
            line-height: 28px;
            float: left;
        }
        .item:first-child{
            width: 840px;
            height: 28px;
            line-height: 28px;
            float: left;
        }
        .interval{
            width: 20px;
            float: left;
        }
        .label{
            width: 90px;
            float: left;
            text-align: right;
        }
        .content{
            width: 290px;
            float: left;
            text-align: left;
        }
        ul.example{
            margin: 0;
            padding: 0;
        }

        ul.example li{
            margin: 0;
            padding: 0;
            list-style: none;
            font-size:12px;
            color: #ffffff;
            line-height: 24px;
        }
        ul.school{
            margin: 0;
            padding: 0;
        }

        ul.school li{
            margin: 0;
            padding: 0;
            list-style: none;
            font-size:12px;
            color: #ffffff;
            line-height: 24px;
        }
    </style>


</head>
<body>
<div class="container">
    <div class="row col-center-block">
        <img style="margin: 2px;" th:each="photo:${photos}" th:src="'http://youhome.oss-cn-zhangjiakou.aliyuncs.com/'+${photo}+'?x-oss-process=image/resize,m_fill,h_200,w_380'"/>
    </div>

    <div id="poi" class="row col-center-block">
        <div style="width: 160px; height: 640px; float:left;">
            <ul class="example">
                <li style="background-color:#ff0000">Arts & Entertainment 娱乐</li>
                <li style="background-color:#ffff00">Automotive	汽车	</li>
                <li style="background-color:#00ff00">Beauty	美容</li>
                <li style="background-color:#00ffff">Education	教育</li>
                <li style="background-color:#0000ff">Event Planning & Services<br/>服务</li>
                <li style="background-color:#ff00ff">Financial Services	金融</li>
                <li style="background-color:#808080">Food 食品</li>
                <li style="background-color:#008000">Health & Medical 健康</li>
                <li style="background-color:#800000">Home Services	家政</li>
                <li style="background-color:#000080">Hotels & Travel 酒店</li>
                <li style="background-color:#808000">Local Events & Flavor<br/>本地生活</li>
                <li style="background-color:#800080">Local Media 本地媒体</li>
                <li style="background-color:#c0c0c0">Local Services	本地服务</li>
                <li style="background-color:#008080">Nightlife	夜生活</li>
                <li style="background-color:#2f4f4f">Pets	宠物	</li>
                <li style="background-color:#483d8b">Professional Services<br/>专业服务</li>
                <li style="background-color:#ff4500">Public Services&Government<br/>政府</li>
                <li style="background-color:#ff8c00">Real Estate 房地产</li>
                <li style="background-color:#9932cc">Recreation	户外	</li>
                <li style="background-color:#adff2f">Religious Organizations 宗教</li>
                <li style="background-color:#3cb371">Restaurants 餐馆</li>
                <li style="background-color:#008b8b">Shopping 购物</li>
                <li style="background-color:#f4a460">Travel	旅游	</li>
            </ul>
        </div>
        <div style="width: 640px; height: 640px; float:left;">
            <img id="poi_map" th:src="${POIResult}" />
        </div>
    </div>

    <div id="school" class="row col-center-block">
        <div style="width: 160px; height: 640px; float:left;">
            <ul class="school">
                <li style="background-color:#008000">小学</li>
                <li style="background-color:#4169e1">初中</li>
                <li style="background-color:#800000">高中</li>
            </ul>
        </div>
        <div style="width: 640px; height: 640px; float:left;">
            <img id="school_map" th:src="${SchoolPolygonResult}" />
        </div>
    </div>

    <div class="row col-center-block">
        <div th:each="item:${HouseBasicInfo}" class="item">
            <div th:text="${item.key}" class="label"></div>
            <div class="interval">:</div>
            <div th:text="${item.value}" class="content"></div>
        </div>
    </div>

    <div class="row col-center-block">
        <div th:each="item:${Characteristics}" class="item">
            <div th:text="${item.key}" class="label"></div>
            <div class="interval">:</div>
            <div th:text="${item.value}" class="content"></div>
        </div>
    </div>

    <div class="row col-center-block">

        <table class="table table-bordered table-condensed">
            <caption>小学</caption>
            <thead>
                <tr class="active">
                    <th>名称</th>
                    <th>类型</th>
                    <th>年级</th>
                    <th>评分</th>
                </tr>
            </thead>
            <tbody>
                <tr th:each="school:${school.elementary}">
                    <td th:text="${school.name}"></td>
                    <td th:text="${school.admission}"></td>
                    <td th:text="${school.grade}"></td>
                    <td th:text="${school.reviewRating}== null?'-':${school.reviewRating}"></td>
                </tr>
            </tbody>
        </table>

        <table class="table table-bordered table-condensed">
            <caption>初中[[#{message}]]</caption>
            <thead>
                <tr class="active">
                    <th>名称</th>
                    <th>类型</th>
                    <th>年级</th>
                    <th>评分</th>
                </tr>
            </thead>
            <tbody>
                <tr th:each="school:${school.middle}">
                    <td th:text="${school.name}"></td>
                    <td th:text="${school.admission}"></td>
                    <td th:text="${school.grade}"></td>
                    <!--<td th:text="${school.reviewRating}== null?'-':${school.reviewRating}"></td>-->
                    <td th:switch="${school.reviewRating}">
                        <p th:case="1"><span>★</span><i>★</i><i>★</i><i>★</i><i>★</i></p>
                        <p th:case="2"><span>★</span><span>★</span><i>★</i><i>★</i><i>★</i></p>
                        <p th:case="3"><span>★</span><span>★</span><span>★</span><span>★</span><i>★</i><i>★</i></p>
                        <p th:case="4"><span>★</span><span>★</span><span>★</span><span>★</span><i>★</i></p>
                        <p th:case="5"><span>★</span><span>★</span><span>★</span><span>★</span><span>★</span></p>
                        <p th:case="*">-</p>
                    </td>
                </tr>
            </tbody>
        </table>

        <table class="table table-bordered table-condensed">
            <caption>高中</caption>
            <thead>
                <tr class="active">
                    <th>名称</th>
                    <th>类型</th>
                    <th>年级</th>
                    <th>评分</th>
                </tr>
            </thead>
            <tbody>
                <tr th:each="school:${school.high}">
                    <td th:text="${school.name}"></td>
                    <td th:text="${school.admission}"></td>
                    <td th:text="${school.grade}"></td>
                    <td th:text="${school.reviewRating}== null?'-':${school.reviewRating}"></td>
                </tr>
            </tbody>
        </table>
    </div>

    <div class="row col-center-block">
        <div>所有学校坐标</div>
        <img id="SchoolMarkerResult" th:if="${SchoolMarkerResult != null}"   th:src="${SchoolMarkerResult}" />
    </div>
    <div class="row col-center-block">
        <div>小学学校范围坐标</div>
        <img id="SchoolMarkerResult" th:if="${elementary_school_polygon_map != null}" th:src="${elementary_school_polygon_map}" />
    </div>
    <div class="row col-center-block">
        <div>初中学校范围坐标</div>
        <img id="SchoolMarkerResult" th:if="${middle_school_polygon_map != null}"  th:src="${middle_school_polygon_map}" />
    </div>
    <div class="row col-center-block">
        <div>高中学校范围坐标</div>
        <img id="SchoolMarkerResult" th:if="${high_school_polygon_map != null}"  th:src="${high_school_polygon_map}" />
    </div>
    <div class="row col-center-block">
        <img th:src="${Zip_MedianListingPrice_1Bedroom_Line_Chart}"/>
    </div>
    <div class="row col-center-block">
        <img th:src="${Zip_MedianListingPrice_1Bedroom_Time_Chart}"/>
    </div>
    <div class="row col-center-block">
        <div id="Zip_MedianListingPrice_1Bedroom"  style="width: 100%;height:400px; float:left;"></div>
    </div>
    <div class="row col-center-block">
        <div id="BuyerSellerIndex_Zip"  style="width: 100%;height:400px; float:left;"></div>
    </div>
    <div class="row col-center-block">
        <div id="InventoryMeasure_SSA_Zip_Public"  style="width: 100%;height:400px; float:left;"></div>
    </div>
    <div class="row col-center-block">
        <div id="InventoryMeasure_Zip_Public"  style="width: 100%;height:400px; float:left;"></div>
    </div>
    <div class="row col-center-block">
        <div id="MarketHealthIndex_Zip"  style="width: 100%;height:400px; float:left;"></div>
    </div>
    <div class="row col-center-block">
        <div id="Zip_Listings_PriceCut_SeasAdj_AllHomes"  style="width: 100%;height:400px; float:left;"></div>
    </div>
</div>

<script type="text/javascript" th:inline="javascript">
    //***********************************1BuyerSellerIndex_Zip 买方卖方指数 non-time Begin*******************************************
//    var listName=[];//name数组
//    var listValue=[];//value数组
//    $.each([[${BuyerSellerIndex_Zip}]], function(index, item) {
//        if (item.time != null) {
//            listName.push(item.time);//循环添加name
//            listValue.push(item.value);//循环添加value
//        }
//    });
//
//    var BuyerSellerIndex_Zip = echarts.init(document.getElementById('BuyerSellerIndex_Zip'));
//    // 指定图表的配置项和数据
//    var BuyerSellerIndex_Zip_option = {
//        title: {
//            text: 'ECharts 入门示例'
//        },
//        tooltip: {},
//        legend: {
//            data:['销量']
//        },
//        xAxis: {
//            data: listName,
//            axisLabel: {
//                interval:0,
//                rotate:45
//            }
//        },
//        yAxis: {},
//        series: [{
//            name: '销量',
//            type: 'bar',
//            barWidth:25,
//            label: {
//                normal: {
//                    show: true,
//                    rotate:90,
//                    formatter: '{c}'
//                }
//            },
//            data: listValue
//        }]
//
//    };
//    BuyerSellerIndex_Zip.setOption(BuyerSellerIndex_Zip_option);

    //***********************************1BuyerSellerIndex_Zip 买方卖方指数 non-time End*******************************************

    //***********************************2InventoryMeasure_SSA_Zip_Public.csv 滑动平均值销售存量 time Begin*******************************************
    var InventoryMeasure_SSA_Zip_Public_Names = [];//name数组
    var InventoryMeasure_SSA_Zip_Public_Values = [];//value数组
    $.each([[${InventoryMeasure_SSA_Zip_Public}]], function(index, item) {
        if (item.time != null) {
            InventoryMeasure_SSA_Zip_Public_Names.push(item.time);//循环添加name
            InventoryMeasure_SSA_Zip_Public_Values.push(item.value);//循环添加value
        }
    });
    var InventoryMeasure_SSA_Zip_Public = echarts.init(document.getElementById('InventoryMeasure_SSA_Zip_Public'));

    var InventoryMeasure_SSA_Zip_Public_option = {
        title: {
            text: '滑动平均值销售存量'
        },
        tooltip: {},
        legend: {
            data:['销量']
        },
        xAxis: {
            data: InventoryMeasure_SSA_Zip_Public_Names,
            axisLabel: {
                //interval:0,
                rotate:45
            }
        },
        yAxis: {},
        series: [{
            name: '销量',
            type: 'line',
            barWidth:25,
            symbol:'none',
            data: InventoryMeasure_SSA_Zip_Public_Values
        }]

    };
    InventoryMeasure_SSA_Zip_Public.setOption(InventoryMeasure_SSA_Zip_Public_option);

    //***********************************2InventoryMeasure_SSA_Zip_Public.csv 滑动平均值销售存量 time End*******************************************


    //***********************************3	InventoryMeasure_Zip_Public.csv	销售存量	time Begin*******************************************
    var InventoryMeasure_Zip_Public = echarts.init(document.getElementById('InventoryMeasure_Zip_Public'));

    var InventoryMeasure_Zip_Public_Names = [];//name数组
    var InventoryMeasure_Zip_Public_Values = [];//value数组
    var items = [[${InventoryMeasure_Zip_Public}]];
    $.each(items, function(index, item) {
        if (item.time != null) {
            InventoryMeasure_Zip_Public_Names.push(item.time);//循环添加name
            InventoryMeasure_Zip_Public_Values.push(item.value);//循环添加value
        }
    });


    var InventoryMeasure_Zip_Public_option = {
        title: {
            text: '销售存量'
        },
        tooltip: {},
        legend: {
            data:['销量']
        },
        xAxis: {
            data: InventoryMeasure_Zip_Public_Names,
            axisLabel: {
                //interval:0,
                rotate:45
            }
        },
        yAxis: {},
        series: [{
            name: '销量',
            type: 'line',
//            label: {
//                normal: {
//                    show: true,
//                    rotate:30,
//                    formatter: '{c}'
//                }
//            },
            symbol:'none',
            data: InventoryMeasure_Zip_Public_Values
        }]

    };
    InventoryMeasure_Zip_Public.setOption(InventoryMeasure_Zip_Public_option);
    //***********************************3	InventoryMeasure_Zip_Public.csv	销售存量	time End*******************************************

    //***********************************	Zip_MedianListingPrice_1Bedroom.csv	上市价格单卧	time Begin*******************************************
    var Zip_MedianListingPrice_1Bedroom = echarts.init(document.getElementById('Zip_MedianListingPrice_1Bedroom'));

    var Zip_MedianListingPrice_1Bedroom_Names = [];//name数组
    var Zip_MedianListingPrice_1Bedroom_Values = [];//value数组
    var Zip_MedianListingPrice_1Bedroom_items = [[${Zip_MedianListingPrice_1Bedroom}]];
    $.each(Zip_MedianListingPrice_1Bedroom_items, function(index, item) {
        if (item.time != null) {
            Zip_MedianListingPrice_1Bedroom_Names.push(item.time);//循环添加name
            Zip_MedianListingPrice_1Bedroom_Values.push(item.value);//循环添加value
        }
    });

    var Zip_MedianListingPrice_1Bedroom_option = {
        title: {
            text: '上市价格-单卧'
        },
        tooltip: {},
        legend: {
            data:['上市价格-单卧']
        },
        xAxis: {
            data: Zip_MedianListingPrice_1Bedroom_Names,
            axisLabel: {
                //interval:0,
                rotate:45
            }
        },
        yAxis: {
            margin:3,
            splitLine:{
                show:true,
                lineStyle: {
                    // 使用深浅的间隔色
                    color: ['#aaa', '#ddd'],
                    width:0.5,
                    type:'dotted'
                }
            },
            axisLabel: {
                formatter: function (value, index) {
                    if (value >= 1000 && value < 1000000) {
                        value = value / 10000 + "k";
                    } else if (value >= 1000000) {
                        value = value / 1000000 + "m";
                    }
                    return value;
                }
            }
        },
        grid: {
            left: 35
        },
        series: [{
            name: '上市价格-单卧',
            smooth:false,
            type: 'line',
//            label: {
//                normal: {
//                    show: true,
//                    rotate:30,
//                    formatter: '{c}'
//                }
//            },
            lineStyle:{
                normal:{
                    width:1,
                    //type:'dotted' //虚线
                }
            },
            symbol:'none',
            data: Zip_MedianListingPrice_1Bedroom_Values
        }]

    };
    Zip_MedianListingPrice_1Bedroom.setOption(Zip_MedianListingPrice_1Bedroom_option);
    //***********************************3	Zip_MedianListingPrice_1Bedroom.csv	上市价格单卧	time End*******************************************


    var MarketHealthIndex_Zip = echarts.init(document.getElementById('MarketHealthIndex_Zip'));
    var Zip_Listings_PriceCut_SeasAdj_AllHomes = echarts.init(document.getElementById('Zip_Listings_PriceCut_SeasAdj_AllHomes'));

    var HouseBasicInfo=     [[${HouseBasicInfo}]];
    var photos=     [[${photos}]];
    var Characteristics=      [[${Characteristics}]];
    var PopulationAgeResult=      [[${PopulationAgeResult}]];
    var CostsResult=      [[${CostsResult}]];
    var CrimeResult=      [[${CrimeResult}]];
    var EducationResult=      [[${EducationResult}]];
    var EmploymentResult=      [[${EmploymentResult}]];
    var GenderResult=      [[${GenderResult}]];
    var HouseholdResult=      [[${HouseholdResult}]];
    var IncomeResult=      [[${IncomeResult}]];
    var PopulationResult=      [[${PopulationResult}]];
    var RaceResult=      [[${RaceResult}]];
    var WeatherResult=      [[${WeatherResult}]];
    var HousePriceMedianSalesPriceRatioResult=      [[${HousePriceMedianSalesPriceRatioResult}]];
    var HousePriceMedianSalesPriceRatioSQFTResult=      [[${HousePriceMedianSalesPriceRatioSQFTResult}]];
    var Listings=      [[${listings}]];
    var HousePriceMedianSalesPriceRatioResult=      [[${HousePriceMedianSalesPriceRatioResult}]];//此房源价格与附近价格对比
    var HousePriceMedianSalesPriceRatioSQFTResult=      [[${HousePriceMedianSalesPriceRatioSQFTResult}]]; //此房源价格与附近价格对比（每平方英尺）
    var PriceForecastResult=      [[${priceForecastResult}]]; ////房价预测
    var PriceForecastZipResult=      [[${priceForecastZipResult}]]; //ZipCode 房价预测
    var AffordabilityResult=      [[${affordabilityResult}]]; //购房压力指数
    var RentTrendResult=      [[${RentTrendResult}]]; //房租走势
    var mom=      [[${mom}]]; //房价环比增长率
    var yoy=      [[${yoy}]]; //房价同比增长率
    var CondoRentTrendResult=      [[${CondoRentTrendResult}]]; //condo房价变化
    var SFRRentTrendResult=      [[${SFRRentTrendResult}]]; //SFR房价变化
    var HousePriceResult=      [[${HousePriceResult}]]; //房价
    var RentResult=      [[${RentResult}]]; //租金
    var RentRewardsResult=      [[${RentRewardsResult}]]; //租金回报
    var StateHousePriceResult=      [[${StateHousePriceResult}]]; //本州房价(state/US房价变化)
    var USHousePriceResult=      [[${USHousePriceResult}]]; //美国房价(state/US房价变化)
    var Zip_Zhvi_1bedroom=      [[${Zip_Zhvi_1bedroom}]]; //Zip_Zhvi_1bedroom
    var SchoolPolygonResult=      [[${SchoolPolygonResult}]]; //SchoolPolygon
    var AreaResult=      [[${AreaResult}]]; //面积

    var POIResult = [[${POIShortResult}]]; //房源周边景点

    //2018-10-26 新增
    var breakeven_pr = [[${breakeven_pr}]]; //租售比

    var Zip_Zhvi_Summary_AllHomes = [[${Zip_Zhvi_Summary_AllHomes}]]; //房屋价格指数

    var mortgage_affordability_result = [[${mortgage_affordability_result}]]; //贷款能力
    var price_to_income_result = [[${price_to_income_result}]]; //价格收入比
    var rent_affordability_result = [[${rent_affordability_result}]]; //租金能力
    var zri_forecast_public_result = [[${zri_forecast_public_result}]]; //租金涨幅百分比预测
    var sale_to_list_ratio_city_result = [[${sale_to_list_ratio_city_result}]]; //卖房成功比例

    var days_on_market_city_result = [[${days_on_market_city_result}]]; //中位挂牌时间 以城市为准
    var zip_median_listing_price_bottom_tier_result = [[${zip_median_listing_price_bottom_tier_result}]]; //低端房产中位标价
    var zip_median_listing_price_top_tier_result = [[${zip_median_listing_price_top_tier_result}]]; //高端房产中位标价
    var sale_counts_zip_result = [[${sale_counts_zip_result}]]; //房产销售数量 按zip统计
    var sale_counts_seas_adj_city_result = [[${sale_counts_seas_adj_city_result}]]; //房产销售数量
    var affordability_income_result = [[${affordability_income_result}]]; //中位家庭收入
    var sale_prices_zip_result = [[${sale_prices_zip_result}]]; //所有房产中位售价
    var mortgage_rate_jumbo_fixed_result = [[${mortgage_rate_jumbo_fixed_result}]]; //超大贷款利息
    var mortgage_rate_conventional_fixed_result = [[${mortgage_rate_conventional_fixed_result}]]; //传统贷款利息

    var inventory_measure_tiers_metro_public_count_result = [[${inventory_measure_tiers_metro_public_count_result}]]; //存量房 数量
    var inventory_measure_tiers_metro_public_pct_result = [[${inventory_measure_tiers_metro_public_pct_result}]]; //存量房 百分比

    var negative_equity_metro_result = [[${negative_equity_metro_result}]]; //负资产率 大都会
    var negative_equity_city_result = [[${negative_equity_city_result}]]; //负资产率 城市
    var monthly_turnover_zip_result = [[${monthly_turnover_zip_result}]]; //房产换手率
    var foreclosures_per_10k_homes_zip_result = [[${foreclosures_per_10k_homes_zip_result}]]; //法拍房比例


    var affordability_income_result = [[${affordability_income_result}]]; //中位家庭收入 按都会区统计
    var poi_list_result = [[${poi_list_result}]]; //poi 坐标点

    console.log(POIResult);
    $("#poi_map").src(POIResult);

</script>
</body>
</html>